<template>
	<view class="page">
		<view class="card-box">
			<view class="card" :class="(index + 1) % 4 == 1 || (index + 1) % 4 == 0 ? 'card-active' : ''" v-for="(item,index) in list" @click="goPlayVoice(item)">
				<view class="card-title">{{item.Title}}</view>
				<view class="card-content" v-html="item.IntroContent"></view>
			</view>
			<view class="empty-card" v-if="((list.length) % 2) !== 0" v-for="n in (2 - (list.length) % 2)"></view>
		</view>
	</view>
</template>

<script>
	import _custom from '../../../../common/_custom'
	
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			this.getIntroduceList()
			
			uni.$on('introduct-list',res => {
				this.list = res
			})
		},
		methods: {
			getIntroduceList() {
				_custom.getDataJava({
					name: 'introduct-list',
					apiname: 'getIntroduceList',
					apiparam: {}
				})
			},
			goPlayVoice(v) {
				uni.navigateTo({
					url: './play_voice?data=' + JSON.stringify(v)
				})
			}
		}
	}
</script>

<style>
	.card-active {
		background-color: rgba(0, 0, 0, .1) !important;
	}
	
	.card-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 20rpx 0;
	}
	
	.card {
		width: 350rpx;
		height: 250rpx;
		overflow: hidden;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx 5rpx rgba(0,0,0,.1);
		margin-bottom: 30rpx;
	}
	
	.empty-card {
		width: 350rpx;
		height: 250rpx;
	}
	
	.card-title {
		font-size: 30rpx;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
		color: #303133;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:nowrap;
	}
	
	.card-content {
		height: 130rpx;
		font-size: 25rpx;
		color: #909399;
		overflow: hidden;
		text-overflow: ellipsis;
		display:-webkit-box; //作为弹性伸缩盒子模型显示。
		-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
		-webkit-line-clamp:3; //显示的行
	}
	
	.active {
		background-color: rgba(0, 0, 0, .05);
	}
</style>
